<template>
    <div class="editor">
        <div id="editor">
            <div class="toolbar" ref="toolbar"></div>
            <div class="text" ref="tooltext"></div>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, getCurrentInstance, ref, watch, onMounted, onBeforeUnmount, nextTick } from 'vue';
import WangEditor from 'wangeditor';
export default defineComponent({
    name: 'Editor',
    props: {
        modelValue: {
            type: String,
            default: ''
        }
    },
    emits: ['update:modelValue'],
    setup(props, ctx) {
        const instance: any = getCurrentInstance();
        const GL = instance.appContext.config.globalProperties;
        const dialogVisible = ref(false);
        let editor: any = {};
        let text: any = {};
        const toolbar = ref(null);
        const tooltext = ref(null);
        watch(
            () => props.modelValue,
            (val) => {
                editor.txt.html(val);
            }
        );
        const httpRequest = (files: any, insert: any) => {
            const formData = new FormData();
            formData.append('file', files[0]);
            formData.append('folder', 'editor');
            // formData.append('domain', '1');
            GL.$axios
                .post(GL.$api.uploadImg, formData)
                .then((res: any) => {
                    insert(GL.$utils.urlFormat(res.data.url));
                })
                .catch(() => {
                    GL.$message.error('图片上传失败请重新上传！');
                });
        };
        const setEditor = () =>{
            if (editor.config) {
                return false;
            }
            editor = new WangEditor(toolbar.value, tooltext.value);
            editor.config.uploadImgServer = GL.$api.uploadImg;
            editor.config.customUploadImg = httpRequest;
            editor.config.uploadImgMaxLength = 1;
            editor.config.uploadImgMaxSize = 3 * 1024 * 1024;
            editor.config.showFullScreen = true;
            editor.config.menus = [
                'bold', // 粗体
                'fontSize', // 字号
                'italic', // 斜体
                'underline', // 下划线
                'strikeThrough', // 删除线
                'foreColor', // 文字颜色
                'backColor', // 背景颜色
                'link', // 插入链接
                'justify', // 对齐方式
                'emoticon', // 表情
                'image', // 插入图片
                'undo', // 撤销
                'redo' // 重复
            ];
            editor.config.onchange = function(newHtml) {
                ctx.emit('update:modelValue', newHtml);
                // console.log('change 之后最新的 html', newHtml);
            };
            editor.create();
        }
        onMounted(() => {
            setEditor();
        });
        onBeforeUnmount(() => {
            console.log('onBeforeUnmount');
            editor.destroy();
        });
        return {
            dialogVisible,
            toolbar,
            tooltext
        };
    }
});
</script>

<style lang="scss" scoped>
@import 'index.scss';

.editor {
    .w-e-text-container {
        min-height: 100%;
    }
    img {
        max-width: 100%;
        vertical-align: top;
        &:hover {
            box-shadow: none;
        }
    }
}
</style>
